<template>
	<view class="calculator">
		<view class="mainpadding flexbetween">
			<view class="flexleft boxhuang" @click="show=true">
				<text class="text_weight color_san white_nowrap" style="color: #fff;">選擇/輸入商品名稱</text>
				<u-icon name="arrow-right" color="#fff" size="16"></u-icon>
			</view>
			<input type="text" placeholder="請輸入商品名稱" class="textright" v-model="fpgd_name">
		</view>
		<view class="mainpadding2" v-if="appkey">
			<view class="flexbetween">
				<view class="titletext">發票類型</view>
				<u-switch inactiveColor="rgb(230, 230, 230)" v-model="fpopen" activeColor="#ffb800"></u-switch>
			</view>
			<template v-if="fpopen">
				<view class="flexbetween margin_top2"
					style="border: 1rpx solid #fbb826; padding: 20rpx 20rpx;border-radius: 10rpx;">
					<input type="text" placeholder="" class="hei_text titletext" style="width: 100%;" placeholder="請輸入統編或掃描載具/捐贈碼"
						v-model="tbcode" confirm-type="search" />
					<view class="" @click="getCode">
						<u-icon name="scan" color="#fbb826" size="22"></u-icon>
					</view>
				</view>
				<view class="titletext" v-if="appkey && opentype!=-1">
					<!-- 0紙本，1載具，2統編，3捐贈 -->
					<text>{{returnfptext(opentype)}}</text>
					<text>{{tbcode}}</text>
					<text v-show="opentype==2 && tbmc">【{{tbmc}}】</text>
				</view>
			</template>
		</view>
		<Display :input="input" :output="output" />
		<view class="buttons">
			<view class="flexcenter" style="width: 25%;">
				<Button label="AC" type="clear" @click="clear" />
			</view>
			<view class="flexcenter" style="width: 25%;">
				<Button label="del" @click="del" />
			</view>
			<view class="flexcenter" style="width: 25%;">
				<Button label="%" @click="percent" />
			</view>
			<view class="flexcenter" style="width: 25%;">
				<Button label="÷" type="operator" @click="operator('/')" />
			</view>
			<view class="flexcenter" style="width: 25%;">
				<Button label="7" @click="append(7)" />
			</view>
			<view class="flexcenter" style="width: 25%;">
				<Button label="8" @click="append(8)" />
			</view>
			<view class="flexcenter" style="width: 25%;">
				<Button label="9" @click="append(9)" />
			</view>
			<view class="flexcenter" style="width: 25%;">
				<Button label="×" type="operator" @click="operator('*')" />
			</view>
			<view class="flexcenter" style="width: 25%;">
				<Button label="4" @click="append(4)" />
			</view>
			<view class="flexcenter" style="width: 25%;">
				<Button label="5" @click="append(5)" />
			</view>
			<view class="flexcenter" style="width: 25%;">
				<Button label="6" @click="append(6)" />
			</view>
			<view class="flexcenter" style="width: 25%;">
				<Button label="-" type="operator" @click="operator('-')" />
			</view>
			<view class="flexcenter" style="width: 25%;">
				<Button label="1" @click="append(1)" />
			</view>
			<view class="flexcenter" style="width: 25%;">
				<Button label="2" @click="append(2)" />
			</view>
			<view class="flexcenter" style="width: 25%;">
				<Button label="3" @click="append(3)" />
			</view>
			<view class="flexcenter" style="width: 25%;">
				<Button label="+" type="operator" @click="operator('+')" />
			</view>
			<view class="flexcenter" style="width: 50%;">
				<Button label="0" type="w150" @click="append(0)" />
			</view>

			<view class="flexcenter" style="width: 25%;">
				<Button label="." @click="decimal" />
			</view>
			<view class="flexcenter" style="width: 25%;">
				<Button label="=" type="operator" @click="equal" />
			</view>
		</view>
		<view class="flexbetween mainpadding">
			<view class="payTypeClass xiaobai" style="background-color: #00a0e9;" @click="submit(4)">信用卡</view>
			<view class="payTypeClass xiaobai" style="background-color: #ec7301;" @click="dypay">多元支付</view>
			<view class="payTypeClass xiaobai" style="background-color: #db0f62;" @click="submit(1)">錢包點數</view>
			<view class="payTypeClass xiaobai" style="background-color: #a70182;" @click="submit(3)">現金支付</view>
		</view>
		<u-modal :show="show" showCancelButton confirmText="確認" cancelText="取消" confirmColor="#f5a623" title="選擇商品名稱"
			@cancel="show=false" @confirm="show=false;fpgd_name=currentname;">
			<view class="slot-content">
				<view class="mainpadding">
					<picker-view indicator-style="height: 50px;" :value="currentvalue" @change="bindChange"
						class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in fpgd_arr" :key="index">{{item}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</u-modal>
		<u-modal :show="dymodalshow" title="請使用掃描器掃描" confirmColor="#fbb826" confirmText="關閉"
			@confirm="dymodalshow=false">
			<view class="slot-content">
				<view class="mainpadding">
					<view class="flexbetween"
						style="border: 1rpx solid #fbb826; padding: 10rpx 20rpx;border-radius: 10rpx;">
						<input type="text" inputmode="none" placeholder="" class="xiaohei" :focus="dyinputfocus"
							:auto-focus="true" v-model="dycode" @confirm="dykoukuan" confirm-type="search" />
						<view class="" @click="dysaoma()">
							<u-icon name="scan" color="#fbb826" size="22"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</u-modal>
		<u-modal :show="dsmodalshow" title="請使用掃描器掃描" confirmColor="#fbb826" confirmText="關閉"
			@confirm="dsmodalshow=false">
			<view class="slot-content">
				<view class="mainpadding">
					<view class="flexbetween"
						style="border: 1rpx solid #fbb826; padding: 10rpx 20rpx;border-radius: 10rpx;">
						<input type="text" inputmode="none" placeholder="" class="xiaohei" :focus="dsinputfocus"
							:auto-focus="true" v-model="dscode" @confirm="dskoukuan" confirm-type="search" />
						<view class="" @click="dssaoma()">
							<u-icon name="scan" color="#fbb826" size="22"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</u-modal>
		<fukuanmsg :show="messagefk.fkshow" :paystatus="messagefk.paystatus"></fukuanmsg>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import Button from '@/components/Button.vue'
	import Display from '@/components/Display.vue'
	import {
		Interpreter
	} from "eval5";
	export default {
		name: 'Calculator',
		components: {
			Button,
			Display
		},
		data() {
			return {
				fpopen: false,
				input: '',
				output: '0',
				tbcode: "",
				tbmc: "",
				opentype: -1,
				appkey: "",
				fpgd_name: "",
				fpgd_arr: [],
				show: false,
				currentname: "",
				currentvalue: [0],
				dycode: "",
				dyinputfocus: false,
				dymodalshow: false,
				dscode: "",
				dsinputfocus: false,
				dsmodalshow: false,
				jiazongid: "",
				messagefk: {
					fkshow: false,
					paystatus: 1, //1成功，2失败
				},
				issubmit: false
			}
		},
		onLoad() {
			this.appkey = uni.getStorageSync("appkey")
			uni.$on("returnCode", data => {
				this.tbcode = data
			})
			uni.$on("jiazongsacnCode", data => {
				this.dycode = data
				this.dykoukuan()
			})
			uni.$on("getpayscancode", data => {
				if (this.dymodalshow && data) {
					this.dycode = data
					this.dykoukuan()
				}
			})
			this.getInfo()
		},
		onUnload() {
			uni.$off("returnCode")
			uni.$off("jiazongsacnCode")
			uni.$off("getpayscancode")
		},
		watch: {
			tbcode(newval) {
				// 0紙本，1載具，2統編，3捐贈
				if (this.tbcode == "") { //紙本
					this.opentype = 0
				}
				if (this.tbcode.length == 8) { //統編
					this.opentype = 2
					this.getTt()
				}
				if (this.tbcode.length == 6) { //捐贈
					this.opentype = 3
				}
				if (this.tbcode.includes('/')) { //載具
					this.opentype = 1
				}
			},
			fpopen(newval){
				if(newval){
					this.opentype = 0
					this.tbcode = ""
				}else{
					this.opentype = -1
				}
			}
		},
		methods: {
			returnfptext() {
				if (this.opentype == 0 && this.tbcode == '') return "紙本"
				if (this.opentype == 1) return "載具："
				if (this.opentype == 2) return "統編："
				if (this.opentype == 3) return "捐贈："
			},
			getTt() {
				if (this.opentype != 2) {
					return false
				}
				this.http.request("/api/user/getTbmc", "GET", {
					tbcode: this.tbcode
				}).then(res => {
					if (res.code == 1) {
						this.tbmc = res.data.tbinfo.name
					} else {
						this.tbmc = ""
					}
				})
			},
			dypay(val) {
				if (!this.fpgd_name) {
					this.http.modal('提示', '請輸入商品名稱或者到商店管理添加商品固定名稍後操作！', false, (res) => {})
					return false
				}
				if (this.output == 0) {
					this.http.toast("價格不能為0")
					return false
				}
				this.dymodalshow = true
				this.dyinputfocus = true
			},
			dskoukuan() { //點數掃碼槍或輸入回車扣款
				if (this.issubmit) return
				this.issubmit = true
				let data = {
					shop_id: uni.getStorageSync("shop_id"),
					id: this.jiazongid,
					scanpay_code: this.dscode,
					paytype: 1,
					orderdata: {
						opentype: (this.appkey) ? this.opentype : -1,
						tbcode: this.appkey ? this.tbcode : '',
						tbmc: this.appkey ? this.tbmc : '',
					}
				}
				if (!this.fpopen) {
					data.orderdata.opentype = -1
					data.orderdata.tbcode = ""
					data.orderdata.tbmc = ""
				}
				httpRequest.request("/api/ordergoods/paymentOrder", "POST", data).then(res => {
					uni.hideLoading()
					// httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.dsmodalshow = false
						this.clear()
						this.messagefk = {
							fkshow: true,
							paystatus: 1
						}
						setTimeout(() => {
							this.messagefk = {
								fkshow: false,
								paystatus: 1
							}
						}, 1000)
					} else {
						this.issubmit = false
						this.messagefk = {
							fkshow: true,
							paystatus: 2
						}
						setTimeout(() => {
							this.messagefk = {
								fkshow: false,
								paystatus: 2
							}
						}, 1000)
					}
				})
			},
			async dykoukuan() { //多元掃碼槍或輸入回車扣款
				if (this.issubmit) return
				uni.showLoading({
					mask: true,
					title: "請稍後"
				})
				// 1=余额支付 2多元支付3现金支付,4=信用卡,5=linepay支付线上,6=街口支付线上,7=街口支付线下,8=linepay支付线下,9=linepay二维码,10=街口支付二维码,11=全支付扫码
				let val = 0
				if (this.dycode.substring(0, 2) == 22) val = 7
				if (this.dycode.substring(0, 2) == 38) val = 8
				if (this.dycode.substring(0, 2) == 'P1' || this.dycode.substring(0, 2) == 'P2') val = 11
				if (val == 0) {
					httpRequest.toast("付款碼不存在")
					return false
				}
				this.issubmit = true
				let res1 = await this.http.request('/api/ordergoods/addOrder', 'GET', {
					shop_id: uni.getStorageSync("shop_id"),
					zhuimoney: this.output,
					goods_name: this.fpgd_name,
					is_scan: 2,
					ly: 2,
					order_type: 5,
					type: 1
				})
				uni.hideLoading()
				if (res1.code == 1) {
					this.jiazongid = res1.data.order_id
				} else {
					this.issubmit = false
					httpRequest.toast(res1.msg)
					return false
				}
				uni.showLoading({
					mask: true,
					title: "支付中"
				})
				let data = {
					shop_id: uni.getStorageSync("shop_id"),
					id: this.jiazongid,
					scanpay_code: this.dycode,
					paytype: val,
					orderdata: {
						opentype: (this.appkey) ? this.opentype : -1,
						tbcode: this.appkey ? this.tbcode : '',
						tbmc: this.appkey ? this.tbmc : '',
					}
				}
				if (!this.fpopen) {
					data.orderdata.opentype = -1
					data.orderdata.tbcode = ""
					data.orderdata.tbmc = ""
				}
				let res = await this.http.request("/api/ordergoods/paymentOrder", "POST", data)
				uni.hideLoading()
				if (res.code == 1) {
					this.dymodalshow = false
					this.clear()
					this.messagefk = {
						fkshow: true,
						paystatus: 1
					}
					setTimeout(() => {
						this.messagefk = {
							fkshow: false,
							paystatus: 1
						}
					}, 1000)
				} else {
					this.dycode = ""
					this.dymodalshow = false
					this.clear()
					this.dyinputfocus = false
					this.messagefk = {
						fkshow: true,
						paystatus: 2
					}
					setTimeout(() => {
						this.issubmit = false
						this.messagefk = {
							fkshow: false,
							paystatus: 2
						}
						this.dymodalshow = true
						this.dyinputfocus = true
					}, 1000)
				}
			},
			dysaoma() { //多元掃碼扣款
				uni.navigateTo({
					url: "/pages/jiazongpay/jiazongpay"
				})
			},
			dssaoma() { //點數掃碼扣款
				uni.navigateTo({
					url: "/pages/dianshupay/dianshupay?type=1&id=" + this.jiazongid
				})
			},
			bindChange(e) {
				console.log(e);
				const val = e.detail.value
				this.currentname = this.fpgd_arr[val[0]] == "暫無數據" ? "" : this.fpgd_arr[val[0]]
				this.currentvalue = e.detail.value
			},
			getInfo() {
				this.http.request("/api/shop/Shopdeail", "POST", {
					shop_id: uni.getStorageSync("shop_id"),
				}).then(res => {
					if (res.code == 1) {
						this.fpgd_arr = res.data.fpgd_name ? res.data.fpgd_name.split(",") : ["暫無數據"]
						let text = this.fpgd_arr[0]

						if (text != "暫無數據") {
							this.fpgd_name = text
						}
					} else if (res.code == 0) {
						this.http.toast(res.msg);
					} else {
						this.http.toast('系統處理中，請稍後再試');
					}
				})
			},
			getCode() {
				uni.navigateTo({
					url: "/pages/my/getcodetwm"
				})
			},
			submit(val) {
				if (!this.fpgd_name) {
					this.http.modal('提示', '請輸入商品名稱或者到商店管理添加商品固定名稍後操作！', false, (res) => {})
					return false
				}
				if (this.output == 0) {
					this.http.toast("價格不能為0")
					return false
				}
				uni.showLoading({
					mask: true,
					title: "請稍後"
				})
				if (val == 1) { //点数支付
					this.http.request('/api/ordergoods/addOrder', 'GET', {
						shop_id: uni.getStorageSync("shop_id"),
						zhuimoney: this.output,
						goods_name: this.fpgd_name,
						ly: 2,
						order_type: 5,
						type: 1
					}).then(res => {
						uni.hideLoading()
						if (res.code == 1) {
							this.jiazongid = res.data.order_id
							this.dsmodalshow = true
							this.dsinputfocus = true
						}
					})
					return false
				}
				
				this.http.request('/api/ordergoods/addOrder', 'GET', {
					shop_id: uni.getStorageSync("shop_id"),
					zhuimoney: this.output,
					goods_name: this.fpgd_name,
					order_type: 5,
					type: 1
				}).then(res1 => {
					if (res1.code == 1) {
						// 其他支付
						let data = {
							shop_id: uni.getStorageSync("shop_id"),
							id: res1.data.order_id,
							scanpay_code: "",
							paytype: val,
							orderdata: {
								opentype: (this.appkey) ? this.opentype : -1,
								tbcode: this.appkey ? this.tbcode : '',
								tbmc: this.appkey ? this.tbmc : '',
							}
						}
						if (!this.fpopen) {
							data.orderdata.opentype = -1
							data.orderdata.tbcode = ""
							data.orderdata.tbmc = ""
						}
						httpRequest.request("/api/ordergoods/paymentOrder", "POST", data).then(res => {
							uni.hideLoading()
							if (res.code == 1) {
								this.dsmodalshow = false
								this.clear()
								this.messagefk = {
									fkshow: true,
									paystatus: 1
								}
								setTimeout(() => {
									this.messagefk = {
										fkshow: false,
										paystatus: 1
									}
								}, 1000)
							} else {
								this.issubmit = false
								this.messagefk = {
									fkshow: true,
									paystatus: 2
								}
								setTimeout(() => {
									this.messagefk = {
										fkshow: false,
										paystatus: 2
									}
								}, 1000)
							}
						})
					} else {
						uni.hideLoading()
						httpRequest.toast(res1.msg)
					}

				})
			},
			append(value) {
				if (this.input.toString() === "0") {
					this.input = value.toString();
				} else {
					this.input += value.toString()
				}
			},
			clear() {
				this.input = ''
				this.output = '0'
				this.dycode = ""
				this.dymodalshow = false
				this.dyinputfocus = false
				this.dscode = ""
				this.dsmodalshow = false
				this.dsinputfocus = false
				this.tbcode = ""
				this.issubmit = false
			},
			del() {
				this.input = this.input.slice(0, -1)
			},
			sign() {
				if (!this.input) {
					return
				}
				this.input = (-parseFloat(this.input)).toString()
			},
			percent() {
				if (!this.input) {
					return
				}
				this.input = (parseFloat(this.input) / 100).toString()
			},
			decimal() {
				if (!this.input.includes('.')) {
					this.input += '.'
				}
			},
			operator(operator) {
				if (this.input === '') {
					return
				}
				if (this.input.endsWith(operator)) {
					return
				}
				if (this.input.endsWith('+') || this.input.endsWith('-') || this.input.endsWith('*') || this.input
					.endsWith('/')) {
					this.input = this.input.slice(0, -1) + operator
				} else {
					this.input += operator
				}
			},
			equal() {
				const interpreter = new Interpreter(window);
				let result = interpreter.evaluate(this.input)

				if (isNaN(result) || !isFinite(result)) {
					this.output = 'Error'
				} else {
					this.output = result.toString()
				}
			}
		}
	}
</script>

<style>
	.boxhuang {
		background-color: #ec7301;
		padding: 8rpx 20rpx;
		border-radius: 50rpx;
		color: #fff;
	}



	.payTypeClass {
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		padding: 40rpx 0;
		width: 150rpx;
	}

	.buttons {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;

	}


	.calculator {
		/* position: absolute;
		width: 100%;
		height: 100%; */
		/* top: 0;
		left: 0; */
		background-color: #f7f7f7;
		display: flex;
		flex-direction: column;
	}

	.display {
		background-color: #000;
		color: #fff;
		font-size: 48px;
		padding: 30px;
		text-align: right;
		flex-grow: 1;
	}

	.input {
		font-size: 24px;
		opacity: 0.5;
		margin-bottom: 5px;
	}

	.button {
		background-color: #333;
		color: #fff;
		font-size: 24px;
		border-radius: 100%;
		width: 75px;
		height: 75px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		margin: 5px;
		transition: background-color 0.3s;
	}

	.button:active {
		background-color: #444;
	}

	.operator {
		background-color: #f5a623;
		color: #fff;
	}

	.clear {
		background-color: #d3d3d3;
		color: #000;
	}


	.row {
		display: flex;
		flex-wrap: wrap;
	}
</style>
<style lang="scss" scoped>
	.paddinglr {
		padding: 0 30rpx;
	}

	.header {
		padding: 6rpx;
		box-sizing: border-box;
		background: #F1F1F1;
		border-radius: 72rpx 72rpx 72rpx 72rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;

		view {
			width: 45%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #F1F1F1;
			border-radius: 72rpx 72rpx 72rpx 72rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #666666;
		}

		.selects {
			width: 45%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #fff3e6;
			border-radius: 72rpx 72rpx 72rpx 72rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #FF8505;
		}
	}

	.payTypeClass {
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		padding: 40rpx 0;
		width: 150rpx;
	}

	.sytbox {
		border: 1rpx solid #000;
		border-radius: 10rpx;
		padding: 15rpx 30rpx;
	}

	.itembox {
		margin-top: 15rpx;
		width: 200rpx;
		height: 180rpx;
		border: 1rpx solid #000;
		border-radius: 10rpx;
		font-size: 60rpx;
		font-weight: bold;
		box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(0, 0, 0, 0.16);
	}

	.delitem {
		background-color: #013447 !important;
		color: #fff !important;
	}

	.sytsrk {

		text-align: right;
		font-size: 40rpx;
		font-weight: bold;
	}


	.select {
		width: 154rpx;
		height: 69rpx;
		text-align: center;
		line-height: 69rpx;
		background: rgba(255, 133, 5, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #FF8505;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
		position: relative;
	}

	.select::after {
		content: '';
		width: 25rpx;
		height: 20rpx;
		position: absolute;
		right: 0;
		bottom: 0;
		background-image: url('/static/images/mine/invoice_select.png');
		background-size: 100% 100%;
	}

	.vote1Img {
		width: 26rpx;
		height: 26rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.vote2Img {
		width: 23.5rpx;
		height: 23.5rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.vote3Img {
		width: 29rpx;
		height: 29rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.vote4Img {
		width: 27rpx;
		height: 27rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.noSelect {
		width: 154rpx;
		height: 69rpx;
		text-align: center;
		line-height: 69rpx;
		background: rgba(102, 102, 102, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid rgba(102, 102, 102, .1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.invoiceInput {
		width: 100%;
		height: 91rpx;
		background: rgba(196, 196, 196, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	}
</style>